.selectDate{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 1000;
  .dateDialog{
    width: 100%;
    height: auto;
    background-color: #ffffff;
    position: absolute;
    bottom: 0px;
    .selectDate-header{
      width: 100%;
      height: 40px;
      background-color: dodgerblue;
      padding-top: 5px;
      color: #ffffff;
      .close{
        float: right;
        margin-right: 5%;
      }
    }
    .selectDate-content{
      .date-title{
        width: 100%;
        h3{
          display: inline-block;
          width: 20%;
          margin: 5px 0 5px 0;
        }
      }
      .selectDate-option{
        .swiper-container {
          width: 20%;
          height: 150px;
          display: inline-block;
          vertical-align: top;
          .swiper-slide{
            font-size: 20px;
            color: #e2e2e2;
            .hr{
              width: 100%;
              height: 1px;
              background-color: #e2e2e2;
            }
          }
          .swiper-slide-active{
            color: dodgerblue;
            .hr{
              background-color: dodgerblue;
              height: 3px;
            }
          }
          .swiper-slide-next,.swiper-slide-prev{
            color:#000000;
            .hr{
              background-color: #000000;
            }
          }
        }
      }
      .selectDate-footer{
        width: 100%;
        height: 45px;
        border-top: 1px solid #000000;
        box-shadow: 5px 0 10px #000000;
        background-color: #eeeeee;
        .cancel{
          width: 45%;
          height: 45px;
          display: inline-block;
          border-right: 1px solid #000000;
          color: dodgerblue;
        }
        .confirm{
          width: 45%;
          height:45px;
          display: inline-block;
          color: dodgerblue;
        }
      }
    }
  }
}
